import React, { FC, useState } from 'react';
import { Tab, Tabs, Box, Typography, Button } from '@mui/material';
import {
  useAccounts,
  useWallet,
  addChain,
  useSwitchChain,
  useAccountSignature,
} from '@/components/ConnectWallet/useWallet';
import { ethers } from 'ethers';

import ConnectWallet from '@/components/ConnectWallet/';
interface IProps {}
interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}
function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box sx={{ p: 3 }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

function a11yProps(index: number) {
  return {
    id: `simple-tab-${index}`,
    'aria-controls': `simple-tabpanel-${index}`,
  };
}

const BasicTabs: FC<IProps> = (props) => {
  const [value, setValue] = useState(0);
  const { address, balance } = useAccounts();
  const [signature, getSignature] = useAccountSignature();
  const [AccountSignature, setAccountSignature] = useState<string | null>(null);
  const [wallet, disconnectWallet, connectWallet] = useWallet();

  const handleConnectWallet = async () => {
    await connectWallet();
  };

  const handleDisconnectWallet = async () => {
    await disconnectWallet();
  };
  const handleSwitchChain = () => {
    useSwitchChain();
  };

  const handlesAccountSignature = async () => {
    await getSignature();
  };
  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="basic tabs example"
        >
          <Tab label="Item One" {...a11yProps(0)} />
          <Tab label="Item Two" {...a11yProps(1)} />
          <Tab label="Item Three" {...a11yProps(2)} />
        </Tabs>
      </Box>
      <TabPanel value={value} index={0}>
        {wallet ? (
          <Box>
            <Typography>钱包地址：{wallet.address}</Typography>
            <Typography>钱包余额：{wallet.balance}</Typography>
            <Button onClick={handleDisconnectWallet}>断开钱包连接</Button>
          </Box>
        ) : (
          <Button onClick={handleConnectWallet}>连接钱包</Button>
        )}
        <Button onClick={addChain}>添加节点</Button>
        <Button onClick={handleSwitchChain}>切换节点</Button>
        <Button onClick={handlesAccountSignature}>签名{signature}</Button>
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
    </Box>
  );
};

export default BasicTabs;
